<template>
  <ListWrap>
    <template slot="search">
      <el-form size="mini" :model="searchForm" :inline="true">
        <el-form-item size="mini" label="球员姓名">
          <el-input
            class="custom-search-input"
            v-model="searchForm.name"
            size="mini"
            :maxlength="20"
            placeholder="请输入球员姓名"
            clearable
          ></el-input
        ></el-form-item>
        <el-form-item size="mini" label="球衣号码">
          <el-input
            class="custom-search-input"
            v-model="searchForm.clothNumer"
            v-interage
            size="mini"
            :maxlength="19"
            placeholder="请输入球衣号码"
            clearable
          ></el-input
        ></el-form-item>
        <el-form-item size="mini" label="位置">
          <el-select
            v-model="searchForm.position"
            size="mini"
            clearable
            placeholder="请选择位置"
          >
            <el-option
              v-for="(value, key) in PLAYER_POSITION"
              :key="'position' + key"
              :value="key"
              :label="value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template slot="control-left">
      <el-button
        size="mini"
        type="primary"
        :loading="loading"
        @click="handleSearch"
        >查询</el-button
      >
      <el-button size="mini" :loading="loading" @click="handleResetSearch"
        >重置</el-button
      ></template
    >
    <template slot="control-right">
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="handleJumpToAdd"
        >新增球员</el-button
      ></template
    >
    <template slot="list"
      ><div class="player-list-container">
        <el-table
          style="width: 100%"
          v-loading="loading"
          :data="listData"
          border
          height="100%"
        >
          <el-table-column label="ID" prop="id" minWidth="100" />
          <el-table-column prop="name" label="姓名" minWidth="100" />
          <el-table-column prop="position" label="位置" minWidth="100">
            <template slot-scope="scope">
              <span> {{ formatPosition(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="clothNumber" label="球衣号" minWidth="100" />
          <el-table-column prop="age" label="年龄" minWidth="100" />
          <el-table-column prop="price" label="签约价格(万元)" minWidth="120" />
          <el-table-column prop="subScore" label="总评能力值" minWidth="120" />
          <el-table-column prop="status" label="签约状态" minWidth="100">
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.status"
                size="mini"
                :type="{ 1: 'success', 2: 'danger' }[scope.row.status]"
                >{{ PLAYER_STATUS[scope.row.status] }}</el-tag
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="position"
            fixed="right"
            label="操作"
            minWidth="170"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="handleJumpToDetail(scope.row)"
                >详情</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="handleJumpToEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="mini"
                @click="
                  handleChangeStatus(
                    scope.row.id,
                    scope.row.status === 1 ? 2 : 1
                  )
                "
                >{{ scope.row.status === 1 ? "解约" : "签约" }}</el-button
              >
              <el-button
                type="text"
                size="mini"
                style="color: red"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div></template
    >
    <template slot="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageSize"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </template>
  </ListWrap>
</template>

<script>
import ListWrap from "@/components/ListWrap";
import { PLAYER_POSITION, PLAYER_STATUS } from "./constants/index";
import {
  fetchPlayerListData,
  fetchPlayerStatusChange,
  fetchPlayerDelete,
} from "@/api/player/index";
export default {
  name: "player-list",
  components: { ListWrap },
  data() {
    return {
      PLAYER_POSITION,
      PLAYER_STATUS,
      loading: false,
      searchForm: {
        name: "",
        clothNumer: null,
        position: null,
      },
      listData: [],
      pageInfo: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.requestPlayerListData();
  },
  methods: {
    /**
     * 查询
     */
    handleSearch() {
      this.pageInfo.pageNum = 1;
      this.requestPlayerListData();
    },
    /**
     * 重置查询
     */
    handleResetSearch() {
      this.searchForm = this.$options.data().searchForm;
      this.pageInfo = this.$options.data().pageInfo;
      this.requestPlayerListData();
    },
    /**
     * 分页
     */
    handleSizeChange(pageSize) {
      this.pageInfo.pageNum = 1;
      this.pageInfo.pageSize = pageSize;
      this.requestPlayerListData();
    },
    /**
     * 分页
     */
    handleCurrentChange(pageNum) {
      this.pageInfo.pageNum = pageNum;
      this.requestPlayerListData();
    },
    /**
     * 格式化位置
     */
    formatPosition(row) {
      return row?.position ? PLAYER_POSITION[row?.position] || "-" : "-";
    },
    /**
     * 跳转至新增
     */
    handleJumpToAdd() {
      const query = {
        type: "add",
      };
      console.log("跳转至新增", query);
      this.$router.push({ name: "player-add", query });
    },
    /**
     * 跳转至详情
     */
    handleJumpToDetail(row) {
      if (!row?.id) {
        this.$message.warning("数据不完整，请先刷新页面！");
        return false;
      }
      this.$router.push({ name: "player-detail", query: { id: row?.id } });
    },
    /**
     * 跳转至编辑
     */
    handleJumpToEdit(row) {
      if (!row?.id) {
        this.$message.warning("数据不完整，请先刷新页面！");
        return false;
      }
      const query = {
        id: row?.id,
        type: "edit",
      };
      console.log("跳转至编辑", query);
      this.$router.push({ name: "player-edit", query });
    },
    /**
     * 删除球员
     */
    handleDelete(row) {
      if (!row?.id) {
        this.$message.warning("数据不完整，请先刷新页面！");
        return false;
      }
      this.$confirm(`确定删除球员吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          const params = {
            id: row?.id,
          };
          fetchPlayerDelete(params)
            .then((res) => {
              this.loading = false;
              if (res?.code === 1 && res?.data) {
                this.$message.success(`删除成功！`);
                this.requestPlayerListData();
              }
            })
            .catch((err) => {
              console.log(err);
              this.loading = false;
              this.$message.danger(`删除失败！`);
            });
        })
        .catch(() => {
          this.loading = false;
          return false;
        });
    },
    /**
     * 更改球员签约状态
     */
    handleChangeStatus(id, status) {
      if (!id) {
        this.$message.warning("数据不完整，请先刷新页面！");
        return false;
      }
      this.$confirm(`确定${status === 1 ? "签约" : "解约"}球员吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          const params = {
            id,
            status,
          };
          fetchPlayerStatusChange(params)
            .then((res) => {
              this.loading = false;
              if (res?.code === 1 && res?.data) {
                this.$message.success(
                  `${status === 1 ? "签约" : "解约"}成功！`
                );
                this.requestPlayerListData();
              }
            })
            .catch((err) => {
              console.log(err);
              this.loading = false;
              this.$message.danger(`${status === 1 ? "签约" : "解约"}失败！`);
            });
        })
        .catch(() => {
          this.loading = false;
          return false;
        });
    },
    /**
     * 请求球员列表数据
     */
    requestPlayerListData() {
      this.loading = true;
      const params = {
        ...this.searchForm,
        pageSize: this.pageInfo.pageSize,
        pageNum: this.pageInfo.pageNum,
      };
      fetchPlayerListData(params)
        .then((res) => {
          this.listData = res?.data?.items || [];
          this.pageInfo.total = res?.data?.total || 0;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.listData = [];
          this.pageInfo.total = 0;
          this.loading = false;
        });
    },
  },
};
</script>

<style sopced>
.custom-search-input {
  width: 180px;
}
.player-list-container {
  width: 100%;
  height: 100%;
}
</style>
